<template>
  <div class="svgButton" :style="{ color: color }" @click.prevent="onClick">
    <SvgIcon :icon="icon"></SvgIcon>
  </div>
</template>

<style lang="scss" scoped>
.svgButton {
  width: auto;
  border: none;
  font-size: 19px;
  cursor: pointer;
}
</style>

<script lang="ts" setup>
import SvgIcon from '@/components/svg-icon.vue'
import { computed } from 'vue'

const props = defineProps({
  icon: String,
  color: String,
})

const emits = defineEmits(['clicked', 'selected'])

const icon = computed(() => {
  return props.icon
})

const color = computed(() => {
  return props.color
})

const onClick = () => {
  emits('clicked')
}
</script>
